import React from 'react';
import { SAgTable } from 'suid-supplement';
import './styles.less';

const ragCellClassRules = {
  // apply green to electric cars
  'rag-green': (params) => params.value === true,
};

// const onFirstDataRendered = (params) => {
//   params.api.createRangeChart({
//     cellRange: {
//       rowStartIndex: 0,
//       rowEndIndex: 8,
//       columns: ['model', 'price'],
//     },
//     chartType: 'groupedColumn',
//     chartThemeOverrides: {
//       common: {
//         title: {
//           enabled: true,
//           text: 'Average Price by Make',
//         },
//       },
//     },
//   });
// };

export default () => {
  // console.log(olympicWinnersJson, 'olympicWinnersJson');
  return (
    <div
      className="ag-theme-quartz" // applying the Data Grid theme
      style={{ height: 400 }} // the Data Grid will fill the size of the parent container
    >
      <SAgTable
        rowData={[
          { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
          { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
          { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
          { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },
          { make: 'Fiat', model: '500', price: 15774, electric: false },
          { make: 'Nissan', model: 'Juke', price: 20675, electric: false },
          { make: 'Vauxhall', model: 'Corsa', price: 18460, electric: false },
          { make: 'Volvo', model: 'EX30', price: 33795, electric: true },
          {
            make: 'Mercedes',
            model: 'Maybach',
            price: 175720,
            electric: false,
          },
          { make: 'Vauxhall', model: 'Astra', price: 25795, electric: false },
          { make: 'Fiat', model: 'Panda', price: 13724, electric: false },
          { make: 'Jaguar', model: 'I-PACE', price: 69425, electric: true },
        ]}
        columnDefs={[
          {
            field: 'make',
          },
          { field: 'model' },
          { field: 'price', filter: 'agNumberColumnFilter' },
          {
            field: 'electric',
            cellClassRules: ragCellClassRules,
          },
        ]}
        defaultColDef={{
          filter: 'agTextColumnFilter',
          floatingFilter: true,
          flex: 1,
        }}
      />
    </div>
  );
};
